<template>
	<transition name="move">
		<div v-show="showFlag" class="food" ref="food">
			<div class="food-content">
				<div class="image-header">
					<img :src="food.image" />
					<div class="back">
						<i class="icon-arrow_lift" @click="hideFood"></i>
					</div>
				</div>
				<div class="content">
					<div class="title">
						{{food.name}}
					</div>
					<div class="detail">
						<span class="sell-count">月售{{food.sellCount}}份</span>
						<span class="rating">好评率{{food.rating}}</span>
					</div>
					<div class="price">
						<span class="now">¥{{food.price}}</span>
						<span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
					</div>
					<div class="cartcontrol-wraper">
						<cartcontrol :food="food"></cartcontrol>
					</div>
					<transition name="fade">
						<div class="buy" v-show="!food.count || food.count===0" @click.stop.prevent="addFirst(food,$event)">加入购物车</div>
					</transition>
				</div>
				<split v-show="food.info"></split>
				<div class="info" v-show="food.info">
					<div class="title">
						商品信息
					</div>
					<p class="text">{{food.info}}</p>
				</div>
				<split></split>
				<div class="rating">
					<h1 class="title">商品评价</h1>
					<ratingselect :select-type="selectType" :only-content="onlyContent" :desc="desc" :ratings="food.ratings" @contentToggle="toggleContent" @ratingtypeSelect="typeSelect"></ratingselect>
				</div>
				<div class="rating-wraper">
					<ul v-show="food.ratings && food.ratings.length">
						<li v-show="needShow(rating.rateType,rating.text)" v-for="(rating,index) in food.ratings" class="rating-item border-1px">
							<div class="user">
								<span class="name">{{rating.username}}</span>
								<img :src="rating.avatar" alt="" class="avatar" width="12" height="12" />
							</div>
							<div class="time">
								{{rating.rateTime | formatDate}}
							</div>
							<p class="text">
								<span :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.tateType===1}"></span> {{rating.text}}
							</p>
						</li>
					</ul>
					<div class="no-rating" v-show="!food.ratings || !food.ratings.length"></div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script type="text/ecmascript-6">
	import Vue from 'vue';
	import BScroll from 'better-scroll';
	import { formatDate } from '../../common/js/date.js';
	import cartcontrol from '../cartcontrol/cartcontrol.vue';
	import split from '../split/split.vue';
	import ratingselect from '../ratingselect/ratingselect.vue';

	const ALL = 2;

	export default {
		props: {
			food: {
				type: Object
			}
		},
		data() {
			return {
				showFlag: false,
				selectType: ALL,
				onlyContent: true,
				desc: {
					all: '全部',
					positive: '满意',
					negative: '吐槽'
				}
			};
		},
		methods: {
			typeSelect(type) {
				this.selectType = type;
				this.$nextTick(() => {
					this.scroll.refresh();
				});
			},
			toggleContent(onlyContent) {
				this.onlyContent = onlyContent;
				this.$nextTick(() => {
					this.scroll.refresh();
				});
			},
			addFirst(event) {
				this.$emit('cartAdd', event.target);
				Vue.set(this.food, 'count', 1);
			},
			show() {
				this.showFlag = true;
				this.selectType = ALL;
				this.onlyContent = false;
				this.$nextTick(() => {
					if(!this.scroll) {
						this.scroll = new BScroll(this.$refs.food, {
							click: true
						});
					} else {
						this.scroll.refresh();
					}
				});
			},
			hideFood() {
				this.showFlag = false;
			},
			needShow(type, text) {
				if(this.onlyContent && !text) {
					return false;
				}
				if(this.selectType === ALL) {
					return true;
				} else {
					return type === this.selectType;
				}
			}
		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		},
		components: {
			'cartcontrol': cartcontrol,
			'split': split,
			'ratingselect': ratingselect
		}
	};
</script>

<style lang="less">
	@import '../../common/less/z.less';
	@import '../../common/less/css3.less';
	@import '../../common/less/appstyle.less';
	.food {
		.pos(f);
		left: 0;
		top: 0;
		bottom: 48px;
		z-index: 30;
		width: 100%;
		background: #fff;
		&.move-enter-active,
		&.move-leave-active {
			transition: all 0.3s linear;
		}
		&.move-enter,
		&.move-leave-active {
			.opa(80);
			transform: translate3d(100%, 0, 0);
		}
		.image-header {
			.pos(r);
			width: 100%;
			height: 0;
			padding-top: 100%;
			img {
				.pos(a);
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.back {
				.pos(a);
				top: 10px;
				left: 0;
				.icon-arrow_lift {
					.d-b();
					padding: 10px;
				}
			}
		}
		.content {
			.pos(r);
			padding: 18px;
			.title {
				line-height: 14px;
				margin-bottom: 8px;
				.font-s14();
				.font-wb();
				color: rgb(7, 17, 27);
			}
			.detail {
				margin-bottom: 18px;
				line-height: 10px;
				.font-s0();
				.sell-count,
				.rating {
					.font-s10();
					color: rgb(147, 153, 159);
				}
				.sell-count {
					margin-right: 12px;
				}
			}
			.cartcontrol-wraper {
				.pos(a);
				right: 12px;
				bottom: 12px;
			}
			.buy {
				.pos(a);
				right: 18px;
				bottom: 18px;
				z-index: 10px;
				height: 24px;
				line-height: 24px;
				padding: 0 12px;
				box-sizing: border-box;
				.border-radius(12px);
				.font-s10();
				color: #fff;
				background: rgb(0, 160, 220);
				&.fade-enter-active,
				&.fade-leave-active {
					transition: all 0.3s linear;
				}
				&.fade-enter,
				&.fade-leave-active {
					.opa(0);
				}
			}
		}
		.info {
			padding: 18px;
			.title {
				line-height: 14px;
				.font-s14();
				margin-bottom: 6px;
				color: rgb(7, 17, 27);
			}
			.text {
				line-height: 24px;
				padding: 0 8px;
				.font-s12();
				color: rgb(77, 85, 93);
			}
		}
		.rating {
			padding-top: 18px;
			.title {
				line-height: 14px;
				.font-s14();
				margin-left: 18px;
				color: rgb(7, 17, 27);
			}
		}
		.rating-wraper {
			padding: 0 18px;
			.rating-item {
				.pos(r);
				padding: 16px 0;
				.border-1px(rgba(7, 17, 27, 0.1));
				.user {
					.pos(a);
					right: 0;
					top: 16px;
					line-height: 12px;
					.font-s0();
					.name {
						.d-ib();
						margin-right: 6px;
						vertical-align: top;
						.font-s10();
						color: rgb(147, 152, 159);
					}
					.avatar {
						.border-radius(90px);
					}
				}
				.time {
					margin-bottom: 6px;
					line-height: 12px;
					.font-s10();
					color: rgb(147, 153, 159);
				}
				.text {
					line-height: 16px;
					.font-s12();
					color: rgb(7, 17, 27);
					.icon-thumb_down,
					.icon-thumb_up {
						line-height: 16px;
						margin-right: 4px;
						.font-s12();
					}
					.icon-thumb_up {
						color: rgb(0, 160, 220);
					}
					.icon-thumb_down {
						color: rgb(147, 153, 159);
					}
				}
			}
			.no-rating {
				padding: 16px 0;
				.font-s12();
				color: rgb(147, 153, 159);
			}
		}
	}
</style>